<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <!-- <script src="js/axios.js"></script> -->
    
</head>
<body>
    <div id="box">
        <child v-on:myevent="getData"></child>
        {{ aa }}--
        {{msg}}
    </div>
    <script>
     // 组件之间的通信
     // 子传父
     Vue.component("child",{
         template:`<div>
            <button @click="sendData">子传父</button>
        </div>`,
         data(){
             return {
                 childMsg:"child"
             }
         },
         methods:{
            sendData(){
                // 子组件中的状态，借助一个事件，通过事件分发机制来实现数据的传递
                // $emit:派发一个自定义事件
                this.$emit("myevent",{
                    msg:this.childMsg,
                    aa:1111
                })
            }
         }
     })
     const vm = new Vue({
            el:"#box",
            data:{
                aa:"",
                msg:""
            },
            methods:{
                getData(rs){
                    // console.log("父组件中的方法执行了",rs);
                    this.aa = rs.aa
                    this.msg=rs.msg
                }
            }
        })

    </script>
</body>
</html>